09 Criando a primeira diretiva

Pensando em outra melhoria, ao passarmos o mouse sobre cada card, podemos fazer com que ele ganhe um tom mais escuro para dar destaque. Poderíamos utilizar a pseudo class hover do CSS, não é? Mas e se quisermos aplicar o mesmo efeito na lupa, ou no placeholder "search" no campo de busca, ou em qualquer outro componente existente em nossa aplicação?

Teríamos que repetir o CSS, mas a ideia é pegarmos o comportamento desejado, o qual não pertence a nenhum componente em específico, e isolá-lo em um único local. Para isso, criaremos nossa primeira diretiva, a Custom Directive.

Todo componente é uma diretiva. A diferença é que @Component, por exemplo, está atrelado a um template, o que não ocorre com a diretiva.

Então, criaremos uma pasta em "shared" chamada "directives", em que colocaremos todas as diretivas. Nela, também criaremos uma pasta denominada "darken-on-hover", dentro da qual criaremos a primeira diretiva. Se tivermos outra diretiva, criaremos outra pasta, e assim por diante, isso porque ainda não estamos trabalhando com arquivos de testes, ou similares.

Criaremos o módulo desta diretiva, darken-on-hover.module.ts, em "darken-on-hover", no qual também criaremos darken-on-hover.directive.ts — isso não é muito diferente do que fizemos até então.

No arquivo da diretiva, teremos:

import { Directive } from '@angular/core';

@Directive({
    selector: ''
})
export class DarkenOnHoverDirective { }

Neste caso, a diretiva será utilizada da seguinte forma: se tivermos um componente <a>, por exemplo, e queremos aplicar o efeito de escurecimento ao passarmos o mouse sobre ele, poderemos digitar algo como <a apDarkOnHover></a>. Isto é, usaremos a diretiva como se fosse um atributo, diretamente na tag ou componente. No entanto, para tal, teremos que colocar seu selector entre colchetes:

@Directive({
    selector: '[apDarkenOnHover]'
})

Enquanto isso, o conteúdo de darken-on-hover.module.ts será:

import { NgModule } from '@angular/core';
import { DarkenOnHoverDirective } from './darken-on-hover.directive';

@NgModule({
    declarations: [ DarkenOnHoverDirective ],
    exports: [ DarkenOnHoverDirective ]
})
export class DarkenOnHoverModule { }

Em "photo-list > photos > photos.component.html" incluiremos a diretiva apDarkenOnHover na <div>, que é onde queremos aplicar este efeito. Veremos mais detalhes sobre esta implementação a seguir.